import Main from './index.vue';
import {createVNode, render} from 'vue';
import {deepClone} from "utils/util";

export default (function () {
    return (datas = [], index = 0, ops = {}) => {
        if (!datas || datas.length < 1) {
            return
        }
        datas = deepClone(datas)

        let images = []
        let item;
        for (let i = 0; i < datas.length; i++) {
            item = datas[i];
            if (typeof item === 'string') {
                item = {url: item}
            }
            images.push(item)
        }
        let options = {
            datas: images,
            index: index,
            ops: Object.assign({
                closeOnClickModal: false,
                beforeClose: null,
                click: null,
                modal: true
            }, ops),
        }
        let appendTo = ops.appendTo
        if (ops.appendTo) {
            appendTo = document.querySelector(ops.appendTo)
        } else {
            appendTo = document.body
        }
        const parent = document.createElement('div')
        let instance = createVNode(Main, options)
        instance.props.onDestroy = () => {
            render(null, parent)
        }
        render(instance, parent)
        appendTo.appendChild(parent.firstElementChild);
        return instance;
    }
})()
